<template>
    <div class="share-card" v-show="show">
        <van-image fit="cover" :src="'/uploads/'+data.photo">
          <template v-slot:error>
            <van-icon name="user-o" size="40" />
          </template>
        </van-image>
        <p>{{data.user_name}}</p>
        <van-icon class="arrow-down" @click="del" name="arrow-down"></van-icon>
        <p>{{shaitu.update_time}}</p>
        <p>{{shaitu.title==""?'这个人很懒，什么都没有说':shaitu.title}}</p>
        <van-image fit="cover" :src="'/uploads/'+shaitu.thumb0">
          <template v-slot:error>
            <van-icon name="smile-o" size="80" />
          </template>
        </van-image>
        <!-- <van-popup v-model="show" position="top" :overlay="false"></van-popup> -->
    </div>
</template>

<script>
export default {
  name: 'ShareListCard',
  props: {
    data: Object,
    shaitu: Object
  },
  data () {
    return {
      show: true
    }
  },
  methods: {
    del () {
      console.log('this.shaitu.id :', this.shaitu.id)
      this.$dialog.confirm({
        message: '是否删除'
      }).then(() => {
        // on confirm
        this.$axios.get('/api/delete', {
          params: {
            mod: 'shaitu',
            id: this.shaitu.id
          }
        }).then((result) => {
          //   console.log('result :', result);
          if (result) {
            this.show = false
            this.$toast.success('删除成功')
            setTimeout(() => {
              this.$toast.clear()
            }, 700)
          } else {
            this.$toast.fail('删除失败')
          }
        })
      }).catch(() => {
        // on cancel
        console.log('cancel')
      })
    }
  }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.share-card{
    margin: 1rem;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.van-image:last-of-type{
    width: 100%;
    height: 15rem;
    border-radius: 10px;
    overflow: hidden;
}
.van-image:first-of-type{
    /* border: 1px solid black; */
    height: 3rem;
    width: 3rem;
    overflow: hidden;
    float: left;
    margin-bottom: 0.6rem;
    border-radius: 50%;
}
.share-card>p:first-of-type{
  width: 80%;
  float: left;
  margin-left: 0.5rem;
  font-size: 1.1rem;
}
.share-card>p:nth-of-type(2){
  float: left;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: #333;
  width: 80%;
}
.share-card>p:nth-of-type(3){
  float: left;
  margin-left: 0.5rem;
  width: 90%;
  margin-bottom: 0.5rem;
}
.arrow-down{
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.van-popup{
    position: absolute;
}
</style>
